<template>
	<view class="content">
		<Header>
			<image src="https://zhzx.on-line-demo.com/image/logo.png" mode="heightFix" class="logo"></image>
			<view class="text">澄迈县政协通</view>
		</Header>
		<view class="search-content">
			<uni-search-bar @confirm="search" v-model="keywords" :focus="true" clearButton="auto" cancelButton="none" placeholder="热门搜索" class="search-bar"></uni-search-bar>
			<view class="search-btn" @click="search">搜索</view>
		</view>
		<scroll-view style="height: calc(100vh - 100px - var(--status-bar-height));" scroll-y="true" @scrolltolower="lowerBottom">
			<uni-list>
				<uni-list-item direction="row" v-for="item in data" :key="item.id" :to="`/pages/detail?id=${item.id}`">
					<template v-slot:header>
						<view class="uni-thumb" v-if="item.image">
							<image :src="item.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
						</view>
					</template>
					<template v-slot:body>
						<view class="uni-list-box uni-content">
							<view class="title uni-ellipsis-2">
								{{item.title}}
							</view>
							<view class="date">
								{{item.createtime}}
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
			<uni-load-more v-if="showLoad" :status="loadStatus" />
		</scroll-view>
	</view>
</template>

<script>
	import request from '../common/request.js'
	import Header from '../components/header.vue'
	export default {
		components: {
			Header
		},
		data() {
			return {
				data: [],
				page: 1,
				loadStatus: 'loading',
				showLoad: false,
				keywords:''
			}
		},
		mounted() {
			
		},
		methods: {
			search(){
				if(!this.keywords){
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none',
						duration: 2000
					});
					return
				}
				this.getListData()
			},
			showDetail(data) {
				uni.navigateTo({
					url: `detail?id=${data.id}`
				});
			},
			lowerBottom() {
				if (this.loadStatus != 'loading') {
					this.loadStatus = 'loading'
					this.showLoad = true
					this.page++
					this.getListData()
				}
			},
			getListData() {
				request({
					url: '/news/newsList',
					data: {
						page: this.page,
						keywords: this.keywords
					},
					method: 'POST',
				}).then(res => {
					if (res.code == 1) {
						this.data = this.data.concat(res.data)
						if (this.page == res.lastPage) {
							this.loadStatus = 'no-more'
						} else {
							this.loadStatus = 'more'
							this.showLoad = false
						}
					} else {
						this.loadStatus = 'no-more'
						// uni.showToast({
						// 	title: res.msg,
						// 	icon: 'none',
						// 	duration: 2000
						// });
					}
				})
			},
		}
	}
</script>

<style scoped>
	.search-content{
		display: flex;
		align-items: center;
		width: 100%;
	}
	.search-bar{
		width: calc(100% - 60px);
	}
	::v-deep .uni-searchbar__box{
		border: 1px solid #898989;
		height: 40px;
		background-color: transparent !important;
		border-radius: 10px !important;
	}

	.logo {
		height: 20px;
		max-width: 20px;
		margin-right: 6px;
		vertical-align: middle;
		display: inline-block;
	}
	
	.text {
		display: inline-block;
		vertical-align: middle;
	}
</style>